<template>
	<view>
		<view class="swipe" @click="swipeClick()">
			<image :src="obj.image" mode="" class="swipe_img"></image>
		</view>
		<!-- <image src="../../static/settled/bcc.png" mode=""></image> -->
		<view class="detail">
			<view class="detail_t">
				<view class="detail_title">
					{{obj.title}}
				</view>
				<view class="detail_time flex">
					<u-icon size="18" name="clock"></u-icon>
					组局时间：{{obj.time}}
				</view>
				<view class="detail_time flex">
					<u-icon size="18" name="map"></u-icon>
					{{obj.address}}
				</view>
			</view>
			<view class="detail_m1">
				<view class="detail_m1_t flex">
					<view class="detail_time">
						10人一起
					</view>
					<view class="total2 flex">
						仅剩5个名额
						<u-icon color="#8438FC" size="18" name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="detail_m1_b flex">
					<view class="detail_m1_box" v-for="(item,index) in avatarurls">
						<image :src="item.avatar" mode="" class="avatar"></image>
						<view class="total1">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="detail_m1">
				<view class="detail_time">
					组局描述
				</view>
				<view class="detail_m1_b flex">
					{{obj.dec}}
				</view>
			</view>
			<view class="detail_m1">
				<view class="detail_time">
					组局描述
				</view>
				<view class="detail_m1_b flex">
					<image :src="obj.image" mode="" class="swipe_img"></image>
				</view>
			</view>

		</view>
		<view class="detail_bottom">
			<view class="detail_bottom1">
				立即报名(￥{{obj.price}})
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [],
				obj: {},
				avatarurls: [{
						avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
						name: 'jinn'
					},
					{
						avatar: 'https://cdn.uviewui.com/uview/album/2.jpg',
						name: '123'
					},
					{
						avatar: 'https://cdn.uviewui.com/uview/album/3.jpg',
						name: '0088'
					},
					{
						avatar: 'https://cdn.uviewui.com/uview/album/4.jpg',
						name: '纷繁云'
					},
					{
						avatar: 'https://cdn.uviewui.com/uview/album/5.jpg',
						name: '非凡'
					},
					{
						avatar: 'https://cdn.uviewui.com/uview/album/6.jpg',
						name: '北至'
					},


				],
			}
		},
		onLoad(options) {
			this.swiper()
			this.obj = JSON.parse(options.params);
			console.log(this.obj);
		},
		methods: {
			swiper() {
				this.$http.post('api/sys/banner').then(res => {
					this.swiperList = res
				})
			},
			click(e) {
				console.log(e)
				this.tabsIndex = e.index
				this.page = 1
				this.suo = true
				// this.twoDynamic()
			},
			todetial() {
				uni.navigateTo({
					url: '/pages/zuju/zujudetail'
				})
			}
		},
	}
</script>

<style>
	.swipe_img {
		width: 100%;
		height: 500rpx;
	}


	.detail_t {
		padding: 30rpx;
		background-color: #fff;
		padding-bottom: 10rpx;
	}

	.detail {
		padding-bottom: 200rpx;
	}

	.detail_title {
		margin: 20rpx 0;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.detail_time {
		margin: 20rpx 0;
		font-size: 32rpx;
		color: #666;
	}

	.detail_m1_box {
		margin-top: 10rpx;
		margin-right: 20rpx;
		text-align: center;
	}

	.detail_m1 {
		font-size: 30rpx;
		margin-top: 20rpx;
		padding: 30rpx;
		background-color: #fff;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.detail_m1_t {
		align-items: center;
		justify-content: space-between;
	}

	.total1 {
		margin-top: 10rpx;
		font-size: 28rpx;
		color: #666;
	}

	.total2 {
		justify-content: end;
		align-items: center;
		font-size: 36rpx;
		color: #8438FC;
	}

	.detail_bottom {
		position: fixed;
		bottom: 0rpx;
		padding: 20rpx 50rpx;
		text-align: center;
		background-color: #fff;

	}

	.detail_bottom1 {
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;
		width: 650rpx;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #A973FF;
		border-radius: 20rpx;
	}
</style>